<template>
  <div class="articles-container">
    屈若雅
    <el-card class="box-card">
      <!--      上面的部分-->
      <el-form ref="form" label-width="80px" size="small">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="标签名称">
              <el-input v-model="form.tags" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select v-model="form.province" placeholder="请选择" style="width:100%;" @change="getCityInfo">
                <el-option
                  v-for="(item,index) in citySelect.provinceOptions"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 地区 -->
          <el-col :span="6">
            <el-form-item label="地区">
              <el-select v-model="form.city" placeholder="请选择" style="width:100%;">
                <el-option v-for="(item,index) in citySelect.cityOptions" :key="index" :label="item"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="form.state" placeholder="请选择" style="width:100%;">
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="30px" style="text-align:left;">
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button size="small" type="primary" @click="onClickSearch">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align:right;">
              <el-button icon="el-icon-edit" size="small" type="success" @click="onClickAdd">新增用户</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert :closable="false" :title="title" show-icon type="info"></el-alert>
      <!--      表格-->
      <el-table :data="tableData" style="width: 100%;margin:10px 0;">
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="企业编号" prop="number"></el-table-column>
        <el-table-column align="center" label="企业简称" prop="shortName"></el-table-column>
        <el-table-column align="center" label="标签" prop="tags"></el-table-column>
        <el-table-column align="center" label="创建者" prop="creatorID"></el-table-column>
        <el-table-column align="center" label="创建日期" prop="">
          <template v-slot="{row}">
            {{ new Date(row.addDate) | parseTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="remarks" width="180px"></el-table-column>
        <el-table-column align="center" label="状态" prop="">
          <template v-slot="{row}">
            {{ row.state ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template v-slot="{row}">
            <el-button circle icon="el-icon-edit" plain type="primary" @click="onClickEdit(row.id)"></el-button>
            <!--            禁用按钮-->
            <el-tooltip :content="row.state === 1 ? '禁用' : '启用'" class="item" effect="dark" placement="top">
              <el-button :icon="row.state === 1 ? 'el-icon-close' : 'el-icon-check'"
                         :type="row.state === 1 ? 'warning' : 'success'" circle
                         plain
                         @click="onClickDisable(row)"></el-button>
            </el-tooltip>
            <el-button circle icon="el-icon-delete" plain type="danger"
                       @click="onClickDel(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-row justify="end" style="height: 60px" type="flex">

        <el-pagination
          :current-page="pageData.page"
          :page-size="pageData.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          :total="counts"
          background
          layout="prev,pager, next, sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </el-row>
    </el-card>
    <companys-add :id="id" ref="editRef" :dialogVisible.sync="showAddDialog" @successAdd="loadCompanyList"/>
  </div>
</template>

<script>
import { disabled, list, remove } from '../../api/hmmm/companys.js'
import CompanysAdd from '../components/companys-add'
import { citys, provinces } from '../../api/hmmm/citys'

export default {
  name: 'company',
  components: { CompanysAdd },
  data () {
    return {
      citySelect: {
        provinceOptions: [],
        cityOptions: []
      },
      stateOptions: [],
      id: '',
      showAddDialog: false,
      form: {},
      pageData: {
        page: 1, // 当前页数
        pagesize: 10 // 每页几条
      },
      counts: 0, // 数据总数
      tableData: []
    }
  },
  computed: {
    title () {
      return '数据一共' + this.counts + '条'
    }
  },
  created () {
    this.getProvinceList()
    this.loadCompanyList()
  },
  methods: {
    // 城市下拉选择框
    getProvinceList () {
      this.citySelect.provinceOptions = provinces()
    },
    /// 获取区
    getCityInfo (val) {
      this.citySelect.cityOptions = citys(val)
      // console.log(citys(val))
      // 显示默认第一个区
      this.form.city = this.citySelect.cityOptions[0]
    },
    // 每页几条数据该表
    handleSizeChange (val) {
      this.pageData.pagesize = val
      this.loadCompanyList()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      this.pageData.page = val
      this.loadCompanyList()
    },
    // 表单清除
    resetForm () {
      this.form = {}
      this.pageData = {}
      this.loadCompanyList()
    },
    // 获取文章列表
    async loadCompanyList () {
      const { data } = await list(this.pageData)
      this.counts = data.counts
      this.tableData = data.items
    },
    // 点击新增
    onClickAdd () {
      this.showAddDialog = true
    },
    // 搜索
    onClickSearch () {
      this.pageData = { ...this.form }
      this.loadCompanyList()
    },
    // 编辑
    onClickEdit (id) {
      this.showAddDialog = true
      this.id = id
      setTimeout(() => {
        this.$refs.editRef.loadEditRowById()
      })
    },
    // 点击删除
    onClickDel (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(id)
        this.$message.success({ message: '删除成功!' })
        await this.loadCompanyList()
        if (!this.tableData.length) {
          this.pageData.page--
          await this.loadCompanyList()
        }
      }).catch(() => {
      })
    },
    // 点击禁用
    onClickDisable (row) {
      // console.log(id, state)
      this.$confirm(`已成功${row.state === 1 ? '禁用' : '启用'}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await disabled({
          id: row.id,
          state: !row.state - 0
        })
        await this.loadCompanyList()
        this.$message.success(`已成功${row.state === 0 ? '禁用' : '启用'}`)
        if (this.form !== {} && this.counts === 0) {
          await this.loadCompanyList()
        } else if (!this.tableData.length) {
          this.pageData.page--
          await this.loadCompanyList()
        }
      }).catch(() => {
        this.$message.info('您取消了操作')
      })
    }

  }
}
</script>

<style lang='less' scoped>
.articles-container {
  padding: 10px;
}
</style>
